import { Card } from 'antd-mobile'
import styles from '../css/order.module.css'
import { useDispatch, useSelector } from 'react-redux'
import { addSeat } from '../../../store/slice/orderSlice'

function ChooseSeat() {
  const psgArr = useSelector((store) => store.order.psgArr)
  const seatArr = useSelector((store) => store.order.seatArr)
  const dispatch = useDispatch()
  const sLeft = ['a', 'b', 'c']
  const sRight = ['d', 'f']

  const isActive = (seat) => (seatArr.includes(seat) ? 'active' : '')

  const updateSeat = (seat) => {
    dispatch(addSeat(seat))
  }

  return (
    <div
      className={styles.chooseSeatBox}
      style={{ display: psgArr.length === 0 ? 'none' : 'block' }}
    >
      <Card title="在线选座">
        <div className={styles.row}>
          <div>窗</div>
          {/* 左侧的 ABC 座位 */}
          <div className={styles.seatLeft}>
            {/* 外层循环，生成每一行 */}
            {psgArr.map((item, index) => (
              <div key={index}>
                {/* 内层循环，生成每一列 */}
                {sLeft.map((v, i) => (
                  <span key={i}>
                    <span
                      onClick={() => updateSeat(index + '-' + v)}
                      className={[
                        'iconfont icon-seat' + v,
                        isActive(index + '-' + v)
                      ].join(' ')}
                    ></span>
                  </span>
                ))}
              </div>
            ))}
          </div>
          <div>过道</div>
          {/* 右侧的 DF 座位 */}
          <div className={styles.seatRight}>
            {/* 外层循环，生成每一行 */}
            {psgArr.map((item, index) => (
              <div key={index}>
                {/* 内层循环，生成每一列 */}
                {sRight.map((v, i) => (
                  <span key={i}>
                    <span
                      onClick={() => updateSeat(index + '-' + v)}
                      className={[
                        'iconfont icon-seat' + v,
                        isActive(index + '-' + v)
                      ].join(' ')}
                    ></span>
                  </span>
                ))}
              </div>
            ))}
          </div>
          <div>窗</div>
        </div>
      </Card>
    </div>
  )
}

export default ChooseSeat
